<template>
  <view class="container">
    <!-- 登录页面 -->
    <view class="card card--login" v-if="currentView === 'login'">
      <view class="card-body">
        <text class="card-title">欢迎登录！</text>
        <form @submit.prevent="login">
          <!-- 用户名 -->
          <view class="form-group">
            <uni-easyinput
                v-model="loginForm.name"
                placeholder="请输入用户名"
                required
            />
          </view>
          <!-- 密码 -->
          <view class="form-group">
            <uni-easyinput
                type="password"
                v-model="loginForm.password"
                placeholder="请输入密码"
                required
            />
          </view>
          <button class="btn btn-lg" @click="login">登录</button>
        </form>
        <view class="switch-form">
          <text>没有账户?
            <!-- 跳转到注册页面 -->
            <navigator url="/pages/login/register" class="switch-text">注册</navigator>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { loginOwnerInfo } from '/api/owners';  // 引入你的登录接口

export default {
  data() {
    return {
      currentView: 'login',  // 默认显示登录页面
      loginForm: {
        name: '',
        password: ''
      }
    };
  },
  methods: {
    // 登录逻辑
    async login() {
      if (!this.loginForm.name || !this.loginForm.password) {
        // 如果用户名或密码为空，提示用户
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        });
        return;
      }

      try {
        // 调用登录接口
        let res = await loginOwnerInfo(this.loginForm);

        console.log(this.loginForm);
        console.log(res);

        // 判断后端返回状态码
        if (res.code === 2000) { // 登录成功
          const { token, user } = res.data; // 解构后端返回的 token 和用户信息

          // 保存用户信息到本地存储
          uni.setStorageSync('userInfo', user);
          uni.setStorageSync('token', token);

          // 跳转到首页index
          uni.redirectTo({
            url: '/pages/index/index'
          });
        } else {
          // 登录失败，显示后端返回的错误信息
          uni.showToast({
            title: res.message || '登录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        // 捕获登录请求错误
        uni.showToast({
          title: '系统登录失败，请稍后再试',
          icon: 'none'
        });
        console.error("登录失败: ", error);
      }
    }

  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.uni-easyinput {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  width: 100%;
  padding: 12px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}

.switch-form {
  text-align: center;
  margin-top: 15px;
}

.switch-text {
  color: #007aff;
  cursor: pointer;
  text-decoration: underline;
}
</style>
